<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
import { getMedicalOrderLogistics } from '@/api/order'
import type { ExpressData } from '@/types/order'
import { onMounted } from 'vue'
import { ref } from 'vue'
import aMapCom from '../components/a-Map/a-Map.vue'


function onBackClick() {
  uni.navigateBack({ delta: 1 })
}

// 1. 查询物流详情
// 获取地址参数
const pageParams = defineProps<{ id: string }>()
// 当前位置
const logisticsInfo = ref({} as ExpressData)

// 查看物流信息
const getLogistics = async () => {
  // 调用接口
  const data = await getMedicalOrderLogistics(pageParams.id)
  // 渲染数据
  logisticsInfo.value = data
}
getLogistics()
</script>

<template>
  <view class="timeline-page">
    <!-- 加载高德地图 -->
    <aMapCom v-if="logisticsInfo.logisticsInfo" :logisticsInfo="logisticsInfo"></aMapCom>
    <!-- <view id="map" class="uni-map"></view> -->
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ logisticsInfo.estimatedTime }} 送达
        {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <!-- 1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-else-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-else-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import 'index.scss';
</style>
